<template>
	<div class="modal-mask flex" v-if="toggle" :animation="animationData">
		<image class="mask-image" src="/static/img/liyangbeijing.png" mode="aspectFill" style="z-index: -1;"></image>
		<div class="middle-box">
			<image :src="canvasUrl" :style="{ height: 64 / scale + 'vw' }" mode="aspectFill" class="modal-img"></image>
			<div :class="{'bottom-box': true, 'safeBottom': showSafeBottom}">
				<span class="iconfont icon-guanbi1" @tap="close"></span>
				<p class="_title">{{ _title }}</p>
				<p class="_text">{{ _text }}</p>
				<div class="button1" @tap="onShare">{{ _button1 }}</div>
				<div class="button2" @tap="onSave">{{ _button2 }}</div>
			</div>
		</div>
		<canvas canvas-id="myCanvas" class="pet-canvas" :style="{height: 100 / scale + 'vw'}"></canvas>
	</div>
</template>

<script>
	import Poster from '@/$ma/common/js/poster.js';
	export default{
		props:{
			//是否空出底部安全距离
			showSafeBottom: {
				type: Boolean,
				default: true
			}
		},
		data(){
			return{
				toggle: false,
				_title:'海报生成成功',
				_text:'快去分享给小伙伴们吧～',
				_button1: '分享给微信好友',
				_button2: '保存到相册(朋友圈)',
				bgUrl:'/static/img/posters.png',//海报背景图
				avatar: '',//海报头像
				qrcode: '', //小程序码
				animationData: {},
				scale: 0.66 ,//画布的宽高比例
				canvasUrl: '',
				px: null
			}
		},
		methods:{
			getPx(vw){
				if (!this.px) return 0;
				else return Number((this.px * vw).toFixed(0));
			},
			//初始化
			init(obj){
				if(obj.title) this._title = obj.title;
				if(obj.text) this._text = obj.text;
				if(obj.button1) this._button1 = obj.button1;
				if(obj.button2) this._button2 = obj.button2;
				if(obj.bgUrl) this.bgUrl = obj.bgUrl;
				if(obj.scale) this.scale = obj.scale;
			},
			async close(){
				uni.showTabBar({
					animation: true
				})
				this.toggle = false;
				await this.onAnimation(0)
			},
			async open(obj){
				//当是对像值的时候去调用
				if(obj) {
					if(obj instanceof Object) this.init(obj);
				}
				await this.onCanvas();
				//关闭底部导航栏
				uni.hideTabBar({
					animation: true
				})
				this.toggle = true;
				this.$nextTick(() => {
					this.onAnimation(1)
				})
			},
			//过渡动画
			onAnimation(opacity, scale) {
				return new Promise((resolve, reject) => {
					var animation = uni.createAnimation({
						duration: 300,
						timingFunction: "linear"
					})
					animation.opacity(opacity).step();
					this.animationData = animation.export();
					setTimeout(() => {
						resolve(true)
					}, 300)
				})
			},
			async onSave(){
				uni.showModal({
					content: '确定保存到相册？',
					success: async (e) => {
						if(e.confirm){
							await Poster.onSave(this.canvasUrl);
						}
					}
				})
			},
			onShare(){
				wx.showShareImageMenu({
					path: this.canvasUrl,
					success() {
						console.log('分享海报成功');
					},
					fail() {
						console.log('分享海报失败');
					}
				});
			},
			//生成canvas图片
			async onCanvas(){
				if(this.canvasUrl) return;
				let { getPx } = this;
				let ctx = uni.createCanvasContext('myCanvas', this);
				
				//画背景白色盒子
				Poster.onRect(ctx,{
					x: 0, y: 0, w: getPx(100),h: getPx(100 / this.scale),r: getPx(2.13),color: '#efefef'
				})
				
				//画背景图
				await Poster.onAspectFillImg(ctx,{
					url: this.bgUrl,
					// url: 'http://img2.xiangxiangad.com/Fr3U7NfwqlcPns_nQdZth7LKhed7',
					w: getPx(100),
					h: getPx(100 / this.scale),
					x: 0,
					y: 0
				});
				
				//画底部白色背景盒子
				Poster.onRect(ctx,{
					x: getPx(5),
					y: getPx(120),
					w: getPx(90),
					h: getPx(24),
					r: getPx(2.13),
					color: '#FFF'	
				})
				
				//画头像
				await Poster.onAvatar(ctx,{
					url: this.avatar,
					x: getPx(4.5),
					y: getPx(4.5),
					w: getPx(15),
					h: getPx(15),
					r: getPx(7.5)
				})
				
				//画文本
				Poster.onText(ctx,{
					// content: '有滋茶叶',
					content: this.poster_title,
					fontSize: getPx(3.73),
					fontWeight: 'bold',
					color: '#181818',
					x: getPx(21.5),
					y: getPx(6.13)
				})
				
				//画文本
				Poster.onText(ctx,{
					// content: '餐饮好茶选有滋',
					content: this.poster_desc,
					fontSize: getPx(3.2),
					fontWeight: 'normal',
					color: '#000',
					x: getPx(21.5),
					y: getPx(13.5)
				})
				
				const code = await Poster.onImgInfo(this.qrcode);
				
				ctx.drawImage(code.path,getPx(70),getPx(4.5),getPx(15),getPx(15))
				
				ctx.draw(false, async () => {
					//将canvas转成图片
					this.canvasUrl = await this.onDraw('myCanvas');
				})
			},
			//将canvas生成图片路径
			onDraw(canvasId) {
				return new Promise((resolve, reject) => {
					wx.canvasToTempFilePath({
						x: 0,
						y: 0,
						canvasId,
						success: (res) => {
							// console.log(res.tempFilePath)
							resolve(res.tempFilePath)
						},
						fail: (err) => {
							console.log(err)
						}
					}, this)
				})
			}
		},
		async mounted() {
			const window = uni.getSystemInfoSync();
			const windowWidth = window.windowWidth;
			//vw转换成px
			this.px = windowWidth / 100;
			this.bgUrl = this.getSetVal('poster_bg')
			this.avatar = this.getSetVal('poster_avatar')
			this.qrcode = this.getSetVal('qrcode')
			this.poster_title = this.getSetVal('poster_title')
			this.poster_desc = this.getSetVal('poster_desc')
		}
	}
</script>

<style lang="scss">
	.safeBottom{
		padding-bottom: env(safe-area-inset-bottom);
		padding-bottom: constant(safe-area-inset-bottom);
	}
	.middle-box{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
		height: 100%;
	}
	.bottom-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		border-radius: 6.4vw 6.4vw 0 0;
		width: 100vw;
		background-color: #FFF;
		margin-top: 8vw;
		padding-left: 5.33vw;
		padding-right: 5.33vw;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  

		._title{
			margin-top: 8.53vw;
			font-size: 4.27vw;
			color: #181818;
			font-weight: bold;
			padding: 0 5vw;
			text-align: center;
		}
		._text{
			font-size: 3.73vw;
			color: #000;
			font-weight: normal;
			padding: 0 5vw;
			text-align: center;
			margin-bottom: 8.53vw;
		}
		.icon-guanbi1{
			position: absolute;
			right: 5.33vw;
			top: 5.33vw;
			color: #000;
			font-size: 5.33vw;
			font-weight: bold;
		}
		.button1,.button2{
			height: 12.8vw;
			width: 100%;
			background-color: #637E32;
			border: 0px solid #707070;
			border-radius: 6.4vw;
			font-size: 3.73vw;
			color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			margin-bottom: 2.13vw;
		}
	}
	.mask-image {
		will-change: transform;
		position: fixed;
		top: 0;
		left: -50%;
		height: 100%;
		width: 200%;
		z-index: 1000;
		background: transparent;
		animation: box-ani 40s  infinite linear;
	}
	@keyframes box-ani {
	    from {transform: rotate(0)}
	    to {transform: rotate(360deg)}
	 }
	.modal-mask {
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;
		padding: 0 8vw;
		background-color: rgba(11, 11, 11, .7);
		z-index: 99999;
		display: flex;
		align-items: center;
		// justify-content: center;
		flex-direction: column;
		opacity: 0;
	}
	
	.three{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.modal-img {
		width: 64vw;
		border-radius: 2.13vw;
		border: 1px solid #FFFFFF;
		z-index: 1;
		display: block;
	}
	.modalThree-box {
		padding: 17.33vw 5.33vw 8.53vw 5.33vw;
		background-color: #FFF;
		border-radius: 4.27vw;
		display: flex;
		align-items: center;
		flex-direction: column;
		// position: relative;
		// top: 33.6vw;
		.modalThree-title{
			display: block;
			margin-bottom: 1.07vw;
			font-weight: 500;
		}
		
	
		.save-btn {
			margin-top: 6.4vw;
			width: 75.33vw;
			height: 10.67vw;
			font-size: 3.73vw;
			border-radius: 2.13vw;
			font-weight: 500;
			color: #FFFFFF;
			background-color: #000000;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;
		}
	}
	.pet-canvas {
		position: absolute;
		top: 0;
		left: 9999px;
		// left: 0;
		width: 100vw;
		// background-color: green;
	}
</style>
